/**

 [
 {
 name: "首页",
 url: "/home",
 active:true
 },
 {
 name: "其他",
 url: "/else",
 active:true,
 }
 ]
 */


// 用的是element-ui的tabs组件
const RightTabsNav = {
    props: {
        rightTabsNavData: JSON
    },
    setup() {
        const tabPosition = ref('right')
        let id = "tab-"
        return {
            tabPosition,
            id
        }
    },
    template: `
        <div id="RightTabsNav" > 
             <el-tabs :tab-position="tabPosition"  class="demo-tabs">
               <template v-for="item in rightTabsNavData">
                    <el-tab-pane :label="item.name" :name="item.url"></el-tab-pane>
                </template>
             </el-tabs>
        </div>

    `,
    mounted: function () {
        //变量rightTabsNavData去掉url的全部/符号
        this.rightTabsNavData.forEach(function (item, index) {
            item.newUrl=item.url;
            item.url = item.url.replace(/\//g, "")

        })

        // this.$router.push(item.url)
        let thisf = this

        //清除所有的#RightTabsNav下的el-tabs__item的class is-active
        $("#RightTabsNav .el-tabs__item").removeClass("is-active")


        //遍历rightTabsNavData
        this.rightTabsNavData.forEach(function (item, index) {
           let url= item.url.replace(/\//g, "")
            //找到第一个active为true的,添加class is-active
            if (item.active === true) {
                checkElement("#" + thisf.id +url, function (e) {
                    $(e).addClass("is-active")
                })
            }
            //给所有的元素添加点击跳转路由事件
            checkElement("#" + thisf.id + url, function (e) {
                $(e).click(function (){
                    thisf.$router.push(item.newUrl)
                })
            })

        })


        $("#RightTabsNav").mouseover(function () {
            //#TabLeftList .el-tabs__nav-scroll .el-tabs__nav .el-tabs__item 宽度150px
            $("#RightTabsNav .el-tabs__nav-scroll .el-tabs__nav .el-tabs__item").css("width", "200px")

        })

        $("#RightTabsNav").mouseout(function () {
            //#TabLeftList .el-tabs__nav-scroll .el-tabs__nav .el-tabs__item 宽度60px
            $("#RightTabsNav .el-tabs__nav-scroll .el-tabs__nav .el-tabs__item").css("width", "60px")
        })
    },

    methods: {},
    components: {}

}